<template>
  <div class="login">
    <div class="loginbox">
      <h3>嗨购后台系统-2220</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item prop="adminname">
          <el-input v-model="ruleForm.adminname" type="adminname" autocomplete="off" />
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="ruleForm.password" type="password" autocomplete="off" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// 导入 登录接口
import { loginApi } from '@/utils/login'
// console.log('loginApi', loginApi)

// 使用映射方法将store仓库上的数据和方法映射到当前组件的实例上
import { mapMutations } from 'vuex'

// 导入菜单项
import { routes } from '@/router/index.js'

export default {
  name: '',
  data() {
    return {
      ruleForm: {
        // 表单的用户名和密码
        adminname: 'admin',
        password: '123456'
      },
      ruleFormRef: null, // 表单组件实例对象
      rules: {
        //验证规则
        adminname: [{ validator: this.validateAdminname, trigger: 'blur' }],
        password: [{ validator: this.validatePwd, trigger: 'blur' }]
      }
    }
  },
  methods: {
    ...mapMutations(['setuserinfoFn']),
    // 登录事件
    submitForm(formEl) {
      // console.log('ruleFormRef', formEl)
      // 使用 formEl组件实例对象validate方法实现一个表单验证功能
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          // 验证通过
          //01: 调用登录接口, 实现登录功能
          // console.log(this.ruleForm)
          loginApi(this.ruleForm).then((res) => {
            // console.log(res)
            if (res.data.code == 200) {
              //02: 已经将登录提示添加在响应拦截器中统一处理
              //03: 判断 如果登录的账户是admin 账户, 然后给返回的数据中添加checkedkey数组菜单
              if (this.ruleForm.adminname == 'admin') {
                // 表示admin 账户
                let useinfo = res.data.data
                useinfo.checkedkeys = routes[2].children
                this.setuserinfoFn(useinfo)
              } else {
                // 表示其他账户 有后端返回有菜单数组
                //将后端返回的用户信息存到本地可以vuex 中
                this.setuserinfoFn(res.data.data)
              }

              //04: 跳转页面到首页
              this.$router.push('/home')
            }
          })
        } else {
          // 验证不通过
          console.log('验证不通过')
          return false
        }
      })
    },
    // 重置事件
    resetForm(formEl) {
      if (!formEl) return
      formEl.resetFields()
    },
    //验证账户的函数
    validateAdminname(rule, value, callback) {
      if (/^\w{2,6}$/.test(value)) {
        // 验证通过
        callback()
      } else {
        callback(new Error('账号有误,请重新输入!!!'))
      }
    },
    //验证密码的函数
    validatePwd(rule, value, callback) {
      if (/^\d{6}$/.test(value)) {
        // 验证通过
        callback()
      } else {
        callback(new Error('密码有误,请重新输入!!!'))
      }
    }
  },
  mounted() {
    // 给表单组件实例对象赋值为表单组件实例对象
    this.ruleFormRef = this.$refs.ruleFormRef
    //console.log(this.$refs.ruleFormRef)
  }
}
</script>
<style lang='scss' scoped >
.login {
  width: 100%;
  height: 100%;
  background-image: url('@/assets/imgs/bg.jpeg');
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  .loginbox {
    width: 400px;
    padding: 20px 0 20px 0;
    box-sizing: border-box;
    background: white;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    .el-form {
      width: 80%;
      margin: 0 auto;
    }
    /* 
       样式穿透,用来修改某一些ui 组件默认自带的样式,提高权重
     */
    ::v-deep .el-form-item__content {
      margin: 0 !important;
    }
  }
}
</style>